<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<cpn></cpn>
			<cpn></cpn>
			<cpn></cpn>
			
			<cpn2></cpn2>
			<cpn2></cpn2>
			<cpn2></cpn2>
		</div>
		
	</body>
	<template id="cpn">
		<div>
			<h2>计算器1</h2>
			<p><button @click="decrement">-</button>{{count}}<button @click="increment">+</button></p>
		</div>
	</template>
	<template id="cpn2">
		<div>
			<h2>计算器2</h2>
			<p><button @click="decrement">-</button>{{count}}<button @click="increment">+</button></p>
		</div>
	</template>
	<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	// data是函数是因为这样每个组件的data都是独立的对象,不是公用的
		Vue.component('cpn',{
			template : '#cpn',
			// 这是函数增强写法
			data(){
				return {
					count: 0
				}
			},
			methods:{
				decrement(){
					this.count--;
				},
				increment(){
					this.count++;
				}
			}
		})
		
		// 当data为对象的时候会发生连锁反应所有组件的值都会发生改变
		let obj1 = {
			count: 0
		}
		Vue.component('cpn2',{
			template : '#cpn2',
			// 这是函数增强写法
			data(){
				return obj1;
			},
			methods:{
				decrement(){
					this.count--;
				},
				increment(){
					this.count++;
				}
			}
		})
		const app = new Vue({
			el : "#app",
			data:{
				
			}
		})
	</script>
	<script>
	// abc函数表示返回的是同一个对象会造成的其他对象的属性值也变化
	// def则每个返回的对象的地址都不同不会造成上述问题
		const testobj = {
			name : 'lion',
			age : 18
		}
		function abc(){
			return testobj;
		}
		function def(){
			return {
				name : 'lee',
				age : 18
			}
		}
		let testobj1 = abc();
		let testobj2 = abc();
		let testobj3 = abc();
		
		testobj1.name = "hello";
		console.log(testobj2);
		console.log(testobj3);
	</script>
</html>
